<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin-bottom: 40px;
        }
        
        td {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #000;
            font-size: 30px;
        }
        
        .change {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
        }
        
        .change>div {
            width: 500px;
            height: 300px;
            padding: 30px 15px;
            background: #fff;
        }
        
        input {
            margin-bottom: 20px;
            width: 400px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div class="add">
        姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名: <input type="text" placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间" name="name"><br> 联系电话: <input type="text" name="tel" placeholder="Amount"><br> 学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历: <input type="text"
            name="learn" placeholder="Amount"><br> 年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄: <input type="text" name="age" placeholder="Amount"><br> 期望薪资:
        <input type="text" name="money" placeholder="Amount"><br>

        <button>确定</button>
        <button>取消</button>
    </div>
    <hr>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>删除</td>
                <td>修改</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <button name="save">保存数据</button>
    <button name="load">读取数据</button>
    <div class="change">
        <div>
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名: <input type="text" placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间" name="name"><br> 联系电话: <input type="text" name="tel" placeholder="Amount"><br> 学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:
            <input type="text" name="learn" placeholder="Amount"><br> 年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄: <input type="text" name="age" placeholder="Amount"><br> 期望薪资:
            <input type="text" name="money" placeholder="Amount"><br>
            <button>确定</button>
            <button>取消</button>
        </div>
    </div>
    <script>
        const arr = [{
            id: 1,
            name: 'seven_jin',
            tel: 111222333444,
            learn: '本科',
            age: 18,
            money: 18000
        }, {
            id: 2,
            name: 'kauis.bob',
            tel: 111222333444,
            learn: '本科',
            age: 18,
            money: 18000
        }, {
            id: 3,
            name: 'kulusami',
            tel: 111222333444,
            learn: '本科',
            age: 18,
            money: 18000
        }, ];

        const oTbody = document.querySelector('tbody');
        const oAdd = document.querySelector('.add');
        const oBtnEnsure = oAdd.querySelectorAll('button')[0];
        const oBtnCancel = oAdd.querySelectorAll('button')[1];
        const oIptName = oAdd.querySelector('[name="name"]');
        const oIptTel = oAdd.querySelector('[name="tel"]');
        const oIptLearn = oAdd.querySelector('[name="learn"]');
        const oIptAge = oAdd.querySelector('[name="age"]');
        const oIptMoney = oAdd.querySelector('[name="money"]');
        const oChange = document.querySelector('.change');
        const oBtnEnsureChange = oChange.querySelectorAll('button')[0];
        const oBtnCancelChange = oChange.querySelectorAll('button')[1];
        const oIptNameChange = oChange.querySelector('[name="name"]');
        const oIptAgeChange = oChange.querySelector('[name="age"]');
        const oIptTelChange = oChange.querySelector('[name="tel"]');
        const oIptLearnChange = oChange.querySelector('[name="learn"]');
        const oIptMoneyChange = oChange.querySelector('[name="money"]');
        const oBtnSave = document.querySelector('[name="save"]');
        const oBtnLoad = document.querySelector('[name="load"]');
        let index;
        setPage();
        oIptName.addEventListener('change', function() {
            var name = oIptName.value;
            if (/^[a-zA-Z][a-zA-Z0-9_]{7,15}$/.test(name)) {
                this.style.border = "3px solid green";
            } else {
                this.style.border = "3px solid red";
            }
        })
        oIptTel.addEventListener('change', function() {
            var name = oIptTel.value;
            if (/^1[3|4|5|7|8]\d{9}$/.test(name)) {
                this.style.border = "3px solid green";
            } else {
                this.style.border = "3px solid red";
            }
        })
        oBtnEnsure.addEventListener('click', function() {
            if (window.confirm('是否确认添加信息?')) {
                let name = oIptName.value;
                let learn = oIptLearn.value;
                let age = oIptAge.value - 0;
                let tel = oIptTel.value - 0;
                let money = oIptMoney.value - 0;
                let id = arr[arr.length - 1].id + 1;
                arr.push({
                    id: id,
                    name: name,
                    tel: tel,
                    learn: learn,
                    age: age,
                    money: money
                })
                console.log(arr);
                setPage();
            }
        })
        oTbody.addEventListener('click', function(e) {
            if (e.target.getAttribute('name') === 'del') {
                if (!window.confirm('您确定要删除吗?')) {
                    return;
                }
                arr.splice(Number(e.target.getAttribute('index')), 1);
                setPage();
            } else if (e.target.getAttribute('name') === 'change') {
                oChange.style.display = 'flex';
                index = Number(e.target.getAttribute('index'));
                oIptNameChange.value = arr[index].name;
                oIptAgeChange.value = arr[index].age;
                oIptTelChange.value = arr[index].tel;
                oIptMoneyChange.value = arr[index].money;
                oIptLearnChange.value = arr[index].learn;
            }
        })
        oBtnEnsureChange.addEventListener('click', function() {
            if (window.confirm('您确定要修改吗?')) {
                let name = oIptNameChange.value;
                let learn = oIptLearnChange.value;
                let age = oIptAgeChange.value - 0;
                let tel = oIptTelChange.value - 0;
                let money = oIptMoneyChange.value - 0;
                arr[index].name = name;
                arr[index].age = age;
                arr[index].money = money;
                arr[index].tel = tel;
                arr[index].learn = learn;
                setPage();
                oChange.style.display = 'none';

            }
        })
        oBtnCancelChange.addEventListener('click', function() {
            oChange.style.display = 'none';
        })

        function setPage() {
            if (arr.length === 0) {
                oTbody.innerHTML = '<tr><td colspan="7">没有匹配数据</td></tr>';
                return;
            }
            let str = '';
            arr.forEach(function(item, key) {
                str += `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.tel}</td>
                        <td>${item.learn}</td>
                        <td>${item.age}</td>
                        <td>${item.money}</td>
                        <td><button name="del" index="${key}">删除</button></td>
                        <td><button name="change" index="${key}">修改</button></td>
                    </tr>
                `;
            })
            oTbody.innerHTML = str;
        }
        oBtnSave.addEventListener('click', function() {
            var str = oTbody.innerHTML;
            localStorage.setItem('oTbody', str);

        })
        oBtnLoad.addEventListener('click', function() {
            oTbody.innerHTML = localStorage.getItem('oTbody');
        })
    </script>
</body>

</html>